<template>
  <div id="realTableBox">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right;"
          type="primary"
          @click="onSubmit()"
          size="small"
          >查询搜索</el-button
        >
        <el-button
          style="float: right; margin-right: 15px;"
          @click="handleResetSearch()"
          size="small"
        >
          重置</el-button
        >
      </div>
      <div style="margin-top: 15px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="formInline.select" placeholder="搜索类型">
              <el-option label="餐桌编号" value="id"></el-option>
              <el-option label="餐桌类型" value="type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索内容">
            <el-input
              v-model="formInline.input"
              placeholder="请输入搜索内容"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- --------------------------------------- -->
    <div id="forBox">
      <div
        v-for="(item, index) in this.$store.state.wzStore.showSeat"
        :key="index"
      >
        <p>{{ item.id }}号桌__{{ item.type }}</p>
        <p class="el-icon-s-custom">{{ item.peopleNum }}人</p>
        <br />
        <el-button
          type="primary"
          @click="changeState(index, item.id, $event)"
          >{{ item.state }}</el-button
        >
        <h3 v-show="item.show">￥{{ item.fullPrice }}</h3>
        <span v-show="item.show" class="addendBox">
          <el-button type="success" @click="addCase(index, item.id)"
            >加菜</el-button
          >
          <el-button type="warning" @click="normalPay(index, item.id)"
            >结账</el-button
          >
        </span>
      </div>
    </div>
    <!-- -------------------分页----------------------------------- -->
    <div class="block" v-if="flag">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="pageNum"
        :page-size="pageSize"
        :pager-count="pageCount"
        @current-change="changePage"
        :current-page="this.$store.state.wzStore.tablePage"
      ></el-pagination>
    </div>
    <!-- -----------------选择付款方式-模态框---------------- -->
    <template>
      <el-dialog title="提示" :visible.sync="payTypeDialog" width="30%" center>
        <el-button @click="vipPay">会员结账</el-button>
        <el-button @click="notVipPayBtn">非会员结账</el-button>
        <span slot="footer" class="dialog-footer">
          <el-button @click="payTypeDialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </template>
    <!-- -------------------非会员付款模态框--------------------------- -->
    <el-dialog title="提示" :visible.sync="notVipPay" width="30%" center>
      <span>确认账单金额：</span>
      <span>￥{{ this.$store.state.wzStore.needPayNum }}</span>
      <template>
        <el-table
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          :data="itemArr"
          style="width: 100%;"
        >
          <el-table-column prop="name" label="菜品名称"> </el-table-column>
          <el-table-column prop="num" label="数量"> </el-table-column>
          <el-table-column prop="price" label="金额"> </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="notVipPay = false">取 消</el-button>
        <el-button type="primary" @click="notVipSurePay">支 付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as url from "../../http/api";
import http from "../../http/http";
export default {
  name: "",
  data() {
    return {
      currentPage: 1,
      pageSize: 12,
      pageCount: 7,
      payTypeDialog: false,
      notVipPay: false,
      formInline: {
        text: null,
        region: null,
      },
      flag: true,
    };
  },
  watch: {
    //监听钟林的会员结账了没有
    // wzpayFlag() {
    //   if (this.$store.state.zlStore.payFlag) {
    //   this.$store.state.wzStore.seats[
    //     this.$store.state.wzStore.nowPaySeat
    //   ].fullPrice = 0;
    //   this.$store.state.wzStore.needPayNum = null;
    //   this.$store.state.wzStore.nowPaySeat = null; //注释掉这句会导致itemArr计算属性报错
    //   this.$set(this.$store.state.wzStore.seats[temp], "show", false);
    //   this.$store.state.wzStore.seats[temp].state = "可坐";
    //   }
    // },
  },
  created() {
    //加载组件时请求渲染的数据
    if (this.$store.state.wzStore.seats.length == 0) {
      http({
        url: url.wzSeats,
        method: "post",
        data: {},
      })
        .then((res) => {
          // console.log(res);
          this.$store.state.wzStore.seats.push(...res.data);
          let begin = (this.$store.state.wzStore.tablePage - 1) * this.pageSize;
          let end = begin + this.pageSize;
          if (end > this.$store.state.wzStore.seats.length) {
            end = this.$store.state.wzStore.seats.length;
          }
          this.$store.state.wzStore.showSeat = this.$store.state.wzStore.seats.slice(
            begin,
            end
          );
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  computed: {
    // wzpayFlag() {
    //   return this.$store.state.zlStore.payFlag;
    // },
    pageNum() {
      return this.$store.state.wzStore.seats.length;
    },
    getIndex() {
      let index = (this.$store.state.wzStore.tablePage - 1) * this.pageSize;
      // console.log(index);
      return index;
    },
    itemArr() {
      //dialog里面的table
      let nowPaySeat = this.$store.state.wzStore.nowPaySeat;
      let seatsInfo = this.$store.state.wzStore.seatsInfo;
      if (nowPaySeat != null && seatsInfo.length != 0) {
        let obj = seatsInfo.filter((item) => {
          return item.id == nowPaySeat;
        });
        // console.log(obj[0].item);
        return obj[0].item;
      }
    },
  },

  methods: {
    showTime() {
      let begin = (this.$store.state.wzStore.tablePage - 1) * this.pageSize;
      let end = begin + this.pageSize;
      if (end > this.$store.state.wzStore.seats.length) {
        end = this.$store.state.wzStore.seats.length;
      }
      this.$store.state.wzStore.showSeat = this.$store.state.wzStore.seats.slice(
        begin,
        end
      );
    },
    changePage(val) {
      this.currentPage = val;
      this.$store.state.wzStore.tablePage = val;
      this.showTime();
    },
    changeState(index, itemId, e) {
      //可坐
      if (
        this.$store.state.wzStore.seats[this.getIndex + index].state !=
        "正在使用"
      ) {
        console.log(this.$store.state.wzStore.nowSeat);
        this.$router.push("/DCGL/xuancai");
        this.$store.state.wzStore.nowSeat = this.$store.state.wzStore.seats.findIndex(
          (item) => item.id == itemId
        ); //记录入座餐桌对应所在数组的下标
        this.handleResetSearch();
      }
    },
    addCase(index, itemId) {
      this.$store.state.wzStore.nowSeat = this.$store.state.wzStore.seats.findIndex(
        (item) => item.id == itemId
      );
      this.$router.push("/DCGL/xuancai");
    },
    normalPay(index, itemId) {
      this.payTypeDialog = true;
      this.$store.state.wzStore.nowSeat = this.$store.state.wzStore.seats.findIndex(
        (item) => item.id == itemId
      );
      this.$store.state.wzStore.nowPaySeat = this.$store.state.wzStore.nowSeat;
      // console.log(this.$store.state.wzStore.nowSeat);
    },
    vipPay() {
      // this.$store.state.zlStore.payFlag = !this.$store.state.zlStore.payFlag;
      this.$router.push("/HYGL/chaxunhuiyuan");

      let nowPaySeat = this.$store.state.wzStore.nowPaySeat;
      this.$store.state.wzStore.seats[nowPaySeat].fullPrice = 0;
      this.$store.state.wzStore.needPayNum = null;
      this.$store.state.wzStore.nowPaySeat = null; //注释掉这句会导致itemArr计算属性报错
      this.$set(this.$store.state.wzStore.seats[nowPaySeat], "show", false);
      this.$store.state.wzStore.seats[nowPaySeat].state = "可坐";

      let seatsInfo = this.$store.state.wzStore.seatsInfo;
      if (nowPaySeat != null && seatsInfo.length != 0) {
        let obj = seatsInfo.filter((item) => {
          return item.id == nowPaySeat;
        });
        // console.log(obj[0]);

        this.$store.dispatch("vipPayInfo", obj[0]);
      }
    },
    notVipPayBtn() {
      this.notVipPay = true;
      let temp = this.$store.state.wzStore.nowPaySeat;
      for (let i = 0; i < this.$store.state.wzStore.seatsInfo.length; i++) {
        if (this.$store.state.wzStore.seatsInfo[i].id == temp) {
          this.$store.state.wzStore.needPayNum = this.$store.state.wzStore.seatsInfo[
            i
          ].price;
        }
      }
      // console.log(this.$store.state.wzStore.seatsInfo);
    },
    notVipSurePay() {
      //此处应当发起http请求，传结账数据给后台
      this.$message({
        message: "结账成功",
        type: "success",
      });
      this.payTypeDialog = false;
      this.notVipPay = false;
      let temp = this.$store.state.wzStore.nowPaySeat;
      console.log(temp);
      let obj = this.$store.state.wzStore.seatsInfo.filter((item) => {
        return item.id == temp;
      })[0];
      console.log(obj);
      // this.$store.dispatch("sendPayData", obj);

      this.$store.state.wzStore.demo[temp].fullPrice = 0;
      this.$store.state.wzStore.needPayNum = null;
      this.$store.state.wzStore.nowPaySeat = null; //注释掉这句会导致itemArr计算属性报错
      this.$set(this.$store.state.wzStore.seats[temp], "show", false);
      this.$store.state.wzStore.seats[temp].state = "可坐";
    },
    onSubmit() {
      if (this.formInline.input && this.formInline.select) {
        this.flag = false;
        let obj = {
          selectValue: this.formInline.select,
          inputValue: this.formInline.input,
        };
        this.$store.dispatch("tableSearch", obj);
      }
    },
    handleResetSearch() {
      this.flag = true;
      this.formInline.input = null;
      this.formInline.select = null;
      this.showTime();
    },
  },
};
</script>

<style lang="less" scoped>
#realTableBox {
  #forBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    // align-items: center;
    div {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 20px 25px 25px;
      background-color: rgb(40, 104, 146);
      color: white;
      border-radius: 15px;
      p {
        margin: 5px;
      }
      .addendBox {
        position: absolute;
        bottom: 5px;
        right: 25px;
        width: 150px;
      }
    }
    .itemBox {
      position: relative;
    }
  }
  .el-dialog__body {
    span:nth-of-type(1) {
      font-size: 16px;
    }
    span:nth-of-type(2) {
      font-size: 24px;
    }
  }
}
.el-card {
  text-align: left;
  margin-bottom: 15px;
}
</style>
